<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>我爱科技论坛-VIP视频免费看</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/play.css">

   <!--封装好的视频布局样式-->
<link rel="stylesheet" href="css/jsmodern.min.css">

<script src="js/jquery.min.js"></script>

<!--mp4视频插件-->
<script src="js/jsmodern.min.js"></script>

<style>
#video {
	width: 880px;
	height: 496px;
	margin: 0 auto;
	position: relative;
}

#video video {
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.VideoBtn {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 70px;
	height: 70px;
	margin-left: -35px;
	margin-top: -35px;
	cursor: pointer;
	z-index: 10;
}
.movie-vip{
display:none;
}
</style>

<!--视频插件调用方法-->
<script>
$(function () {
	
   var username="${sessionScope.userName}";
	var isViP=0;
	console.log()
	$.ajax({
		type:"get",
		url:"getvip",
		data:"username="+username,
		success:function(data){
			isViP=data,
			console.log(data)
			
		}
	})
		
	//视频
	jsModern.video("#video");
	//播放视频
	$(".VideoBtn").click(function () {
		var video = document.getElementById("videoShow");
		videoVip
		if(isViP==0&&videoVip==1){
			alert("非会员 不能播放");
			location.reload()
		}
		video.play();
		$(".VideoBtn").hide();
	})
	//监听视频的播放状态
	var video = document.getElementById("videoShow");
	video.oncanplay = function () {
		$(".VideoBtn").show();
		//$("#video").attr("poster","");
	}
	//视频播放事件
	video.onplay = function () {
		$("#videoShow").attr("poster", "");
		$(".VideoBtn").hide();
	};
	video.onplaying = function () {
		$(".VideoBtn").hide();
	};

	//视频暂停事件
	video.onpause = function () {
		$(".VideoBtn").show();
	};
	//点击视频周围暂停播放图片出现
	video.onclick = function () {
		if (video.paused) {
			$(".VideoBtn").hide();
			video.play();
		} else {
			$(".VideoBtn").show();
			video.pause();
		}
	};
	
})
</script>
</head>
<body>
<!--site-nav start, 这里使用清除浮动的方式让这个盒子具有高度-->
<div class="site-nav clearfix">
    <div class="w">
        <div class="site-nav-logo">
            <a href="index.html" class="logo"><img src="https://img3.kepuchina.cn/images/2018/logo.png" alt=""></a>
        </div>
        <div class="site-nav-search">
            <form action="" method="post">
                <input type="text" placeholder="请输入电影名称">
                <button type="submit">搜索</button>
            </form>
        </div>
        <div class="site-nav-r">
            <ul>
                <li><a href="index.html">首页</a></li>

                
      <c:if test="${sessionScope.userName==null}">
                <li><a href="userlogin.html">登录/注册</a></li>
          </c:if>
          
          
          <c:if test="${sessionScope.userName!=null}">
       <li><a href="user">个人中心</a></li>
          </c:if>
                <li><a href="user.html">会员</a></li>
                 <li><a href="outuser">退出</a></li>
            </ul>
        </div>
    </div>
</div>
<!--site-nav end-->


<!--play start-->
<div class="play clearfix">
    <div class="w">
        <div class="play-video">
            <div id="video">
                <video src="" id="videoShow"></video>
                <span class="VideoBtn"><img src="images/bo1.png"></span>
            </div>
        </div>
        <div class="play-intro">
            <div class="play-intro-title">
                <span class="movie-vip">VIP</span>
                <span class="movie-name">视频</span>
            </div>
            <div class="play-intro-content">
                <table class="play-intro-table">
                    <tbody>
                    <tr>
                        <td>类型</td>
                        <td>科学</td>
                    </tr>
                    <tr>
                        <td>片长</td>
                        <td>05:04</td>
                    </tr>
                    <tr>
                        <td>发布时间</td>
                        <td>2019-8-20</td>
                    </tr>
                    <tr>
                        <td>播放数量</td>
                        <td>7894</td>
                    </tr>
                    <tr>
                        <td>收藏数量</td>
                        <td>456</td>
                    </tr>
                    <tr>
                        <td>影片介绍</td>
                        <td>影片介绍</td>
                    </tr>
                    </tbody>
                </table>
                <div class="select-index">
                    <a href="#" class="select-last">上一集</a>
                    <select id="select-num" class="select" disabled>
<!--                         <option value="01">第01集</option> -->
<!--                         <option value="02">第02集</option> -->
<!--                         <option value="03">第03集</option> -->
<!--                         <option value="04">第04集</option> -->
<!--                         <option value="05">第05集</option> -->
<!--                         <option value="06">第06集</option> -->
<!--                         <option value="07">第07集</option> -->
<!--                         <option value="08">第08集</option> -->
<!--                         <option value="09">第09集</option> -->
                    </select>
                    <a href="#" class="select-next">下一集</a>
                </div>
                <div class="play-intro-img">
                    <img alt="" src="picture/love.png">
                    <h2>收藏</h2>
                </div>
            </div>
          <!--   <div class="play-intro-img">
                 <h6>收藏</h6>
            </div> -->
        </div>
        <div class="play-other">
            <div class="play-other-l">
                <span class="movie-name">影片名 </span><span class="movie-index">第1集</span><span class="movie-score"></span>
            </div>      
        </div>
    </div>
</div>
<!--play end-->

<!--comment start-->
<div class="comment clearfix">
    <div class="w">
        <!--评论登录的提示信息-->
        <div class="comment-login">
        <c:if test="${sessionScope.userName==null}">
            <div class="comment-top">
                <span>请先<a href="userlogin.html">登录</a>，才可以参与评论！</span>
            </div>
             <div class="comment-bottom">
                <form action="" method="post">
                    <span class="comment-bottom-title">内容</span>
                    <textarea class="comment-text" name="" readonly="readonly"  placeholder="尊敬的用户你好！请先登入后再进行评价，加入会员更享受更多特权哦！" id="" cols="30" rows="10"></textarea>
                </form>
                <a  href="userlogin" class="commit-comment">提交评论</a>
               
            </div>
            </c:if>
            
            <c:if test="${sessionScope.userName!=null}">
            <div class="comment-top">
                <span>欢迎尊贵的&nbsp;&nbsp;<a href="user">${sessionScope.userName}</a>&nbsp;&nbsp;用户登入，请发表您的评论~</span>
            </div>
              <div class="comment-bottom">
                <form action="addcomment" method="post">
                    <span class="comment-bottom-title">内容</span>
                    <textarea class="comment-text"  placeholder="输入你的评论" name="comContent" id="" cols="30" rows="10"></textarea>
                	<button type="submit" class="commit-comment">提交评论</button>
                </form>
               
            </div>
            </c:if>
            

        </div>

        <!--电影评论的内容信息-->

        <div class="comment-con">
            <span class="title">电影评论</span>
 			
            <div class="comment-content">
            <c:if test="${list3!=null}">
                <c:forEach var="msg" items="${list3}"> 
                <div class="userlogo">
                    <img src="${msg.userImg}">
                </div>
                <div class="usercontent">
                    <div class="usercontent-title">
                        <a >${msg.userNickName}</a>&nbsp;&nbsp;<span>评论于&nbsp;&nbsp; ${msg.comTime}</span>
                    </div>
                    <div class="usercontent-con">
                       ${msg.comContent}
                    </div>
                </div>
                </c:forEach>
               </c:if> 
               
                 <c:if test="${list3==null}"> 
              			${list3}
                        <a>&nbsp;&nbsp;当前视频暂无评论&nbsp;&nbsp; </a>
               
                  </c:if> 
            </div>
                     
        </div>


    </div>

</div>
<!--comment start-->


<!--footer start-->
<div class="footer clearfix">
    <div class="w">
        <div class="footer-links">
            <dl>
                <!--注意dl下面有dt和dd两个级别，别搞混了-->
                <dt><a href="#">关于我们</a></dt>
                <dd><a href="#">联系我们</a></dd>
                <dd><a href="#">网站地图</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">投稿须知</a></dd>
            </dl>
            <dl>
                <!--注意dl下面有dt和dd两个级别，别搞混了-->
                <dt><a href="#">联系我们</a></dt>
                <dd><a href="#">邮箱</a></dd>
                <dd><a href="#">微博</a></dd>
                <dd><a href="#">QQ群</a></dd>
                <dd><a href="#">微信</a></dd>
            </dl>
            <dl>
                <!--注意dl下面有dt和dd两个级别，别搞混了-->
                <dt><a href="#">网站服务</a></dt>
                <dd><a href="#">创业报道</a></dd>
                <dd><a href="#">广告支持</a></dd>
                <dd><a href="#">网站推广</a></dd>
                <dd><a href="#">商务合作</a></dd>
            </dl>
            <dl>
                <!--注意dl下面有dt和dd两个级别，别搞混了-->
                <dt><a href="#">帮助中心</a></dt>
                <dd><a href="#">登陆注册</a></dd>
                <dd><a href="#">找回密码</a></dd>
                <dd><a href="#">自助服务</a></dd>
                <dd><a href="#">资源下载</a></dd>
            </dl>
            <dl class="last" id="lastlogo">
                <dt><a href="#">关注我们</a></dt>
                <dd><a href="#">微信</a></dd>
                <dd><a href="#">QQ群</a></dd>
                <dd><a href="#">新浪</a></dd>
                <dd><a href="#">邮箱</a></dd>
                <div class="img-show" id="imgshow">
                    <img src="images/weixin.jpg" alt="">
                </div>
            </dl>
        </div>
    </div>
</div>
<!--footer end-->

<script src="js/xframe-min-1.0.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script src="js/base.js" type="text/javascript"></script>
<script type="text/javascript">


var videoName="${sessionScope.videoName}"
var videoNumber=${sessionScope.videoNumber}
var videoAll;	
var videoVip;
	
	$.ajax({
	type:"get",
	url:"playpick",
	data:"videoName="+videoName+"&videoNumber="+videoNumber,
	success:function(data){
		console.log("请求ajax")
			videoAll=${sessionScope.oneCount};
		if(data.videoVip==1){
			$(".movie-vip").show()
		}
		else{
			$(".movie-vip").hide()
		}
		console.log(data.videoType)
		$(".play-intro-table").html("<tbody><tr><td>类型</td><td>"+data.videoType+"</td></tr><tr><td>总集数</td><td>"+videoAll+"</td></tr><tr><td>发布时间</td><td>"+data.videoTime+"</td></tr><tr><td>播放数量</td><td>"+7894+"</td></tr><tr><td>收藏数量</td><td>"+data.saveCount+"</td></tr><tr><td>影片介绍</td><td>"+data.videoContent+"</td></tr></tbody>")
		$(".play-other-l").html("<span class='movie-name'>"+data.videoName+"</span>&nbsp&nbsp&nbsp<span class='movie-index'>第"+data.videoNumber+"集</span><span class='movie-score'></span>")
		$("#select-num").html("")
		videoVip=data.videoVip;
		console.log("videoVip:"+data.videoVip)
		for(var i=1;i<=videoAll;i++){
			$("#select-num").append(" <option value="+i+">第"+i+"集</option>")
		}
		$("#videoShow").prop("src",data.videoUrl) 
		$("#select-num option").eq(data.videoNumber-1).prop("selected","selected")
		
		},
		error:function(){
		console.log("error")
		}
})


$(function(){
	var id;
	var count=0;
	$(".play-intro-img").on("click",function(){
		if("${sessionScope.userName}"== ""){
			location.href="userlogin"
		}else{
			count++
			if(count%2==0){
				$(".play-intro-img h2").css("color","red")
				$(".play-intro-img img").prop("src","picture/redlove.png")
				
				
				
				$.ajax({
			type:"get",
			url:"addsave",
		 	//data:"videoName="+"中国战斗机的发展"+"&videoNum="+1+"&username="+"林峰说",
		 	data:"videoName="+"${sessionScope.videoName}"+"&videoNumber="+${sessionScope.videoNumber}+"&userName="+"${sessionScope.userName}",
			success:function(data){
						
						id=data
						console.log(data)
			},
			error:function(){
				console.log("error")
			}})






			}else{
				$(".play-intro-img h2").css("color","#fff")
				$(".play-intro-img img").prop("src","picture/love.png")	
				
				$.ajax({
			type:"get",
			url:"deletesave2",
		 	//data:"videoName="+"中国战斗机的发展"+"&videoNum="+1+"&username="+"林峰说",
		 	data:"id="+id,
			success:function(data){
						
						console.log("${sessionScope.videoId}")
			},
			error:function(){
				console.log("error")
			}})
				
				
			}	
		}
		
	})
})

//点击上一集下一集 
$(".select-next").click(function(){
	
	console.log(videoName)
	videoNumber=videoNumber+1
	if(videoNumber<=videoAll){
	window.location.href="videoplay?videoName="+videoName+"&videoNumber="+videoNumber
	}
	else{
		alert("这是最后一集啦！") 
		console.log("点击失败")
	}
	
})

$(".select-last").click(function(){
	console.log(videoName)
	videoNumber=videoNumber-1

	if(videoNumber>0){
	window.location.href="videoplay?videoName="+videoName+"&videoNumber="+videoNumber
	}
	else{
		alert("这是第一集") 
		console.log("点击失败")
	}

	window.location.href="videoplay?videoName="+videoName+"&videoNumber="+videoNumber

})

</script>
</body>
   <!-- 评论成功提示 -->
	<% if(request.getAttribute("defeat")!=null){
	  %>
	  <script type="text/javascript">
	  layui.use('layer', function(){
		  var layer = layui.layer;
		  layer.msg('评论成功！');
		});  

	</script>
 <% 
  }%>
  
     <!-- 评论失败提示 -->
	<% if(request.getAttribute("defeat1")!=null){
	  %>
	  <script type="text/javascript">
	  layui.use('layer', function(){
		  var layer = layui.layer;
		  layer.msg('评论失败！');
		});  

	</script>
 <% 
  }%>
</html>
